$baseFontSize : 40px !default;
$red : #D71345 !default;
$opacity: 1 !default;
@function rem($px) {
  @return $px / $baseFontSize * 1rem;
}
@mixin displayflex{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
@mixin flex($size:1){
  -webkit-box-flex:$size;
  -moz-box-flex:$size;
  -webkit-flex:$size;
  -ms-flex:$size;
  flex:$size;
}
@mixin flexflowCol($direction:column,$dir:vertical){
  -webkit-box-orient:$dir;
  -ms-box-orient: $dir;
  -moz-box-orient: $dir;
  -webkit-flex-flow:$direction nowrap;
  -ms-flex-flow:$direction nowrap;
  -moz-flex-flow:$direction nowrap;
  flex-flow:$direction nowrap;
}
@mixin flexflowRow($direction:row,$dir:horizontal) {
  -webkit-box-orient:$dir;
  -ms-box-orient: $dir;
  -moz-box-orient: $dir;
  -webkit-flex-flow:$direction nowrap;
  -ms-flex-flow:$direction nowrap;
  -moz-flex-flow:$direction nowrap;
  flex-flow:$direction nowrap;
}
@mixin shadow($x:0,$y:0px,$z:5px,$color:#bdbdbd) {
  box-shadow : $x $y $z $color;
  -webkit-box-shadow:  $x $y $z $color;
  -moz-box-shadow:  $x $y $z $color;
}
#video{
  max-width: 100%;
  position: absolute;
  display: none;
  bottom: 6rem;
  z-index: 13;
  left: 50%;
  margin-left: -9%;
}
@-webkit-keyframes down1 {
  0% {
    -webkit-transform: translate3d(0, rem(-3000px), 0);
    transform: translate3d(0, rem(-3000px), 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0,0, 0);
  }
}
@keyframes down1{
  0% {
    -webkit-transform: translate3d(0, rem(-3000px), 0);
    transform: translate3d(0, rem(-3000px), 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes wobble {
  0%{
    -webkit-transform: translate3d(-5px,0,0);
    transform: translate3d(-5px,0,0);
  }
  25%{
    -webkit-transform: translate3d(5px,0,0);
    transform: translate3d(5px,0,0);
  }
  50%{
    -webkit-transform: translate3d(-5px,0,0);
    transform: translate3d(-5px,0,0);
  }
  100%{
    -webkit-transform: translate3d(5px,0,0);
    transform: translate3d(5px,0,0);
  }
}
@keyframes wobble {
  0%{
    -webkit-transform: translate3d(-5px,0,0);
    transform: translate3d(-5px,0,0);
  }
  25%{
    -webkit-transform: translate3d(5px,0,0);
    transform: translate3d(5px,0,0);
  }
  50%{
    -webkit-transform: translate3d(-5px,0,0);
    transform: translate3d(-5px,0,0);
  }
  100%{
    -webkit-transform: translate3d(5px,0,0);
    transform: translate3d(5px,0,0);
  }
}

@keyframes rotate1 {
  0% {
    -webkit-transform:translate3d(200%,200%,0) rotate(0deg) scale(3,3);
    transform: translate3d(200%,200%,0) rotate(0deg) scale(3,3);
  }
  100%{
    -webkit-transform: translate3d(0,0,0) rotate(1080deg) scale(1,1);
    transform: translate3d(0,0,0) rotate(1080deg) scale(1,1);
  }
}
@keyframes rotate2 {
  0% {
    -webkit-transform:translate3d(-200%,20%,0) rotate(0deg) scale(3,3);
    transform: translate3d(-200%,20%,0) rotate(0deg) scale(3,3);
  }
  100%{
    -webkit-transform: translate3d(0,0,0) rotate(1080deg) scale(1,1);
    transform: translate3d(0,0,0) rotate(1080deg) scale(1,1);
  }
}
@keyframes rotate3 {
  0% {
    -webkit-transform:translate3d(-200%,100%,0) rotate(0deg) scale(3,3);
    transform: translate3d(-200%,100%,0) rotate(0deg) scale(3,3);
  }
  100%{
    -webkit-transform: translate3d(0,0,0) rotate(1080deg) scale(1,1);
    transform: translate3d(0,0,0) rotate(1080deg) scale(1,1);
  }
}
@keyframes rotate4 {
  0% {
    -webkit-transform:translate3d(200%,200%,0) rotate(0deg) scale(3,3);
    transform: translate3d(200%,200%,0) rotate(0deg) scale(3,3);
  }
  100%{
    -webkit-transform: translate3d(0,0,0) rotate(1080deg) scale(1,1);
    transform: translate3d(0,0,0) rotate(1080deg) scale(1,1);
  }
}
@-webkit-keyframes rotate1 {
  0% {
    -webkit-transform:translate3d(200%,200%,0) rotate(0deg) scale(3,3);
    transform: translate3d(200%,200%,0) rotate(0deg) scale(3,3);
  }
  100%{
    -webkit-transform: translate3d(0,0,0) rotate(1080deg) scale(1,1);
    transform: translate3d(0,0,0) rotate(1080deg) scale(1,1);
  }
}
@-webkit-keyframes rotate2 {
  0% {
    -webkit-transform:translate3d(-200%,20%,0) rotate(0deg) scale(3,3);
    transform: translate3d(-200%,20%,0) rotate(0deg) scale(3,3);
  }
  100%{
    -webkit-transform: translate3d(0,0,0) rotate(1080deg) scale(1,1);
    transform: translate3d(0,0,0) rotate(1080deg) scale(1,1);
  }
}
@-webkit-keyframes rotate3 {
  0% {
    -webkit-transform:translate3d(-200%,100%,0) rotate(0deg) scale(3,3);
    transform: translate3d(-200%,100%,0) rotate(0deg) scale(3,3);
  }
  100%{
    -webkit-transform: translate3d(0,0,0) rotate(1080deg) scale(1,1);
    transform: translate3d(0,0,0) rotate(1080deg) scale(1,1);
  }
}
@-webkit-keyframes rotate4 {
  0% {
    -webkit-transform:translate3d(200%,200%,0) rotate(0deg) scale(3,3);
    transform: translate3d(200%,200%,0) rotate(0deg) scale(3,3);
  }
  100%{
    -webkit-transform: translate3d(0,0,0) rotate(1080deg) scale(1,1);
    transform: translate3d(0,0,0) rotate(1080deg) scale(1,1);
  }
}

@keyframes rotateFly1 {
  0% {
    -webkit-transform:translate3d(200%,200%,0) rotate(0deg) scale(3,3);
    transform: translate3d(200%,200%,0) rotate(0deg) scale(3,3);
  }
  100%{
    -webkit-transform: translate3d(0,0,0) rotate(0deg) scale(1,1);
    transform: translate3d(0,0,0) rotate(0deg) scale(1,1);
  }
}
@keyframes rotateFly2 {
  0% {
    -webkit-transform:translate3d(-200%,0,0) rotate(0deg) scale(2,2);
    transform: translate3d(-200%,0,0) rotate(0deg) scale(2,2);
  }
  100%{
    -webkit-transform: translate3d(0,0,0) rotate(0deg) scale(1,1);
    transform: translate3d(0,0,0) rotate(0deg) scale(1,1);
  }
}
@keyframes rotateFly3 {
  0% {
    -webkit-transform:translate3d(20%,200%,0) rotate(0deg) scale(2,2);
    transform: translate3d(20%,200%,0) rotate(0deg) scale(2,2);
  }
  100%{
    -webkit-transform: translate3d(0,0,0) rotate(0deg) scale(1,1);
    transform: translate3d(0,0,0) rotate(0deg) scale(1,1);
  }
}
@keyframes rotateFly4 {
  0% {
    -webkit-transform:translate3d(10%,10%,0) rotate(0deg) scale(2,2);
    transform: translate3d(10%,10%,0) rotate(0deg) scale(2,2);
  }
  100%{
    -webkit-transform: translate3d(0,0,0) rotate(0deg) scale(1,1);
    transform: translate3d(0,0,0) rotate(0deg) scale(1,1);
  }
}
@-webkit-keyframes rotateFly1 {
  0% {
    -webkit-transform:translate3d(200%,200%,0) rotate(0deg) scale(3,3);
    transform: translate3d(200%,200%,0) rotate(0deg) scale(3,3);
  }
  100%{
    -webkit-transform: translate3d(0,0,0) rotate(0deg) scale(1,1);
    transform: translate3d(0,0,0) rotate(0deg) scale(1,1);
  }
}
@-webkit-keyframes rotateFly2 {
  0% {
    -webkit-transform:translate3d(-200%,0,0) rotate(0deg) scale(2,2);
    transform: translate3d(-200%,0,0) rotate(0deg) scale(2,2);
  }
  100%{
    -webkit-transform: translate3d(0,0,0) rotate(0deg) scale(1,1);
    transform: translate3d(0,0,0) rotate(0deg) scale(1,1);
  }
}
@-webkit-keyframes rotateFly3 {
  0% {
    -webkit-transform:translate3d(20%,200%,0) rotate(0deg) scale(2,2);
    transform: translate3d(20%,200%,0) rotate(0deg) scale(2,2);
  }
  100%{
    -webkit-transform: translate3d(0,0,0) rotate(0deg) scale(1,1);
    transform: translate3d(0,0,0) rotate(0deg) scale(1,1);
  }
}
@-webkit-keyframes rotateFly4 {
  0% {
    -webkit-transform:translate3d(10%,10%,0) rotate(0deg) scale(2,2);
    transform: translate3d(10%,10%,0) rotate(0deg) scale(2,2);
  }
  100%{
    -webkit-transform: translate3d(0,0,0) rotate(0deg) scale(1,1);
    transform: translate3d(0,0,0) rotate(0deg) scale(1,1);
  }
}

@-webkit-keyframes riseUp {
  0% {
    -webkit-transform:translate3d(0,200%,0) rotate(0deg) scale(1,1);
    transform: translate3d(0,200%,0) rotate(0deg) scale(1,1);
  }
  100%{
    -webkit-transform: translate3d(0,0,0) rotate(0deg) scale(1,1);
    transform: translate3d(0,0,0) rotate(0deg) scale(1,1);
  }
}
@keyframes riseUp {
  0% {
    -webkit-transform:translate3d(0,200%,0) rotate(0deg) scale(1,1);
    transform: translate3d(0,200%,0) rotate(0deg) scale(1,1);
  }
  100%{
    -webkit-transform: translate3d(0,0,0) rotate(0deg) scale(1,1);
    transform: translate3d(0,0,0) rotate(0deg) scale(1,1);
  }
}
.breathe{
  box-shadow:0 1px 2px rgba(0,0,0,.3);
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-name: breathe;
  -webkit-animation-duration: 2000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
}
@-webkit-keyframes breathe {
  0% { opacity: .6; box-shadow:0 1px 2px rgba(255,0,0,0);;}
  100% { opacity: 1; box-shadow:0 1px 30px rgba(255,0,0,0);}
}

@-webkit-keyframes breath {
  0%{
    opacity: 1;
  }
  50%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
@keyframes breath {
  0%{
    opacity: 1;
  }
  50%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
@-webkit-keyframes typewriter-up {
  0%{
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
  }
  100%{
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
}
@keyframes typewriter-up {
  0%{
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
  }
  100%{
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
}
@-webkit-keyframes typewriter-icon-up {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
@keyframes typewriter-icon-up {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
@-webkit-keyframes question-up {
  0%{
    -webkit-transform: translate3d(0,200%,0);
    transform: translate3d(0,200%,0);
  }
  100%{
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
}
@keyframes question-up {
  0%{
    -webkit-transform: translate3d(0,200%,0);
    transform: translate3d(0,200%,0);
  }
  100%{
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
}
@-webkit-keyframes question-down {
  0%{
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
  100%{
    -webkit-transform: translate3d(0,200%,0);
    transform: translate3d(0,200%,0);
  }
}
@keyframes question-down {
  0%{
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
  100%{
    -webkit-transform: translate3d(0,200%,0);
    transform: translate3d(0,200%,0);
  }
}
@-webkit-keyframes question-exchange {
  0%{
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
  50%{
    opacity: 1;
    -webkit-transform: translate3d(500%,0,0);
    transform: translate3d(500%,0,0);
  }
  100%{
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
}
@keyframes question-exchange {
  0%{
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
  50%{
    opacity: 1;
    -webkit-transform: translate3d(500%,0,0);
    transform: translate3d(500%,0,0);
  }
  100%{
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
}
@-webkit-keyframes question-exchange1 {
  0%{
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
  50%{
    opacity: 1;
    -webkit-transform: translate3d(-500%,0,0);
    transform: translate3d(-500%,0,0);
  }
  100%{
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
}
@keyframes question-exchange1 {
  0%{
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
  50%{
    opacity: 1;
    -webkit-transform: translate3d(-500%,0,0);
    transform: translate3d(-500%,0,0);
  }
  100%{
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
}
@-webkit-keyframes cloud {
  0%{
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
  25%{
    -webkit-transform: translate3d(10%,0,0);
    transform: translate3d(10%,0,0);
  }
  50%{
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
  75%{
    -webkit-transform: translate3d(-10%,0,0);
    transform: translate3d(-10%,0,0);
  }
  100%{
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
}
@keyframes cloud {
   0%{
     -webkit-transform: translate3d(0,0,0);
     transform: translate3d(0,0,0);
   }
   25%{
     -webkit-transform: translate3d(10%,0,0);
     transform: translate3d(10%,0,0);
   }
   50%{
     -webkit-transform: translate3d(0,0,0);
     transform: translate3d(0,0,0);
   }
   75%{
     -webkit-transform: translate3d(-10%,0,0);
     transform: translate3d(-10%,0,0);
   }
   100%{
     -webkit-transform: translate3d(0,0,0);
     transform: translate3d(0,0,0);
   }
 }

@-webkit-keyframes gradual{
  0% {
    opacity: 0;
    z-index: 10999;
    -webkit-transition-duration: 1000ms;
    transition-duration: 1000ms;
    -webkit-transform: translate3d(0, 0, 0) scale(0.815);
    transform: translate3d(0, 0, 0) scale(0.815);
  }
  100%{
    opacity: 1;
    -webkit-transition-duration:1000ms;
    transition-duration: 1000ms;
    -webkit-transform:translate3d(0,0,0) scale(1);
    transform: translate3d(0,0,0) scale(1);
  }
}
@keyframes gradual{
  0% {
    opacity: 0;
    z-index: 10999;
    -webkit-transition-duration: 1000ms;
    transition-duration: 1000ms;
    -webkit-transform: translate3d(0, 0, 0) scale(0.815);
    transform: translate3d(0, 0, 0) scale(0.815);
  }
  100%{
    opacity: 1;
    -webkit-transition-duration:1000ms;
    transition-duration: 1000ms;
    -webkit-transform:translate3d(0,0,0) scale(1);
    transform: translate3d(0,0,0) scale(1);
  }
}

*{
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color:rgba(255,255,255,0);
  font-family: Helvetica, sans-serif;
  -webkit-touch-callout: none;
  box-sizing: border-box;
}
a:active,a:hover,a:link,a:visited{
  text-decoration: none;
  outline: none;
}
html,body{
  width: 100%;
  height: 100%;
  font-size: 20px;
}

.pages,.page{
  top:0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  overflow: hidden;
  position: absolute;
}
.page {
  transform: translate3d(0,100%,0);
  -webkit-transform:translate3d(0,100%,0);
  &.prev {
    transition: all 700ms ease-in;
    -webkit-transition: all 700ms ease-in;
    transform: translate3d(0,-100%,0);
    -webkit-transform:translate3d(0,-100%,0);
  }
  &.current {
    transition: all 700ms ease-in;
    -webkit-transition: all 700ms ease-in;
    transform: translate3d(0,0,0);
    -webkit-transform:translate3d(0,0,0);
  }
}
.audio {
  width: rem(95px);
  height: rem(102px);
  position: fixed;
  top: 3rem;
  right: 1.2rem;
  z-index: 100;
  &.off {
    background: url(https://images.simpletour.com/wechat/activity/myWay/music_on.png) no-repeat center;
    background-size: contain;
  }
  &.on{
    background: url(https://images.simpletour.com/wechat/activity/myWay/music_off.png) no-repeat center;
    background-size: contain;
  }
}
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  z-index: 1000;
  background-color: #ecdccc;
  opacity: 1;
  text-align: center;
  .loading_gif{
    width: 80%;
    margin: 7rem auto 0;
    img {
      width: 100%;
    }
  }
  .progressBar {
    position: relative;
    width: 60%;
    height:.5rem;
    border-radius: 4px;
    overflow: hidden;
    margin: 1rem auto;
    background-color: #f9f2ea;
    .bar{
      width: 100%;
      border-radius: 4px;
      height:.5rem;
      position: absolute;
      background-color: #bb2340;
      z-index: 11;
      transform: translate3d(-100%,0,0);
      -webkit-transform:translate3d(-100%,0,0);
    }
  }
  .loading_btn {
    position: absolute;
    bottom: 1rem;
    width: 40%;
    left: 50%;
    margin-left: -20%;
    opacity: 0;
    img{
      width:100%;
    }
    &.in{
      opacity: 1;
      -webkit-transition-duration:1500ms;
      transition-duration: 1500ms;
      -webkit-transform:translate3d(0,0,0) scale(1);
      transform: translate3d(0,0,0) scale(1);
    }
  }
}
.page1{
  background-color: #f7f3e7;
  font-size: 0;
  .page-content{
    position: absolute;
    overflow: hidden;
    left:8px;
    top:8px;
    .cover {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height:100%;
      background: url(https://images.simpletour.com/wechat/activity/myWay/cover.png) no-repeat center;
      z-index: 11;
      &.hide {
        display: none;
      }
    }
    .cover-content {
      position: absolute;
      top: 30%;
      left: 0;
      width: 100%;
      height:100%;
      z-index: 11;
      text-align: center;
      opacity: 0;
      img {
        width: 60%;
      }
      &.in{
        opacity: 1;
        -webkit-transition-duration:1500ms;
        transition-duration: 1500ms;
        -webkit-transform:translate3d(0,0,0) scale(1);
        transform: translate3d(0,0,0) scale(1);
      }
      &.out{
        opacity: 0;
        z-index: 10999;
        -webkit-transition-duration: 1500ms;
        transition-duration: 1500ms;
        -webkit-transform: translate3d(0, 0, 0) scale(0.815);
        transform: translate3d(0, 0, 0) scale(0.815);
      }
    }
  }
  .bg{
    position: absolute;
    width: 100%;
    z-index:1;
  }
  .dog{
    position: absolute;
    width: 100%;
    bottom: 0;
    z-index: 5;
    &.wobble {
      -webkit-animation:wobble ease-out .1s forwards;
      animation:wobble ease-out .1s forwards;
    }
  }
  .border{
    position: absolute;
    width: 100%;
    z-index:11;
  }
  .bottom {
    position: absolute;
    width: 80%;
    height: 4rem;
    left:50%;
    margin-left: -40%;
    bottom: -.5rem;
    z-index: 11;
    background: url(https://images.simpletour.com/wechat/activity/myWay/bottom_bg.png) no-repeat center;
    background-size: contain;
    text-align: center;
    padding-top: 1rem;
    .bottom_font {
      width: 80%;
      opacity: 0;
      &.png {
        width: 84%;
        margin-top: .3rem;
      }
      img {
        width:100%;
      }
      &.show{
        opacity: 1;
        -webkit-transition-duration:500ms;
        transition-duration: 500ms;
        -webkit-transform:translate3d(0,0,0) scale(1);
        transform: translate3d(0,0,0) scale(1);
      }
      &.hide{
        opacity: 0;
        z-index: 10999;
        -webkit-transition-duration: 500ms;
        transition-duration: 500ms;
        -webkit-transform: translate3d(0, 0, 0) scale(0.815);
        transform: translate3d(0, 0, 0) scale(0.815);
      }
    }
  }
  .a-first,.a-second,.a-third{
    position: absolute;
    z-index: 3;
    height: rem(3000px);
  }
  .a-first{
    width: rem(158px);
    left:rem(40px);
    background: url("https://images.simpletour.com/wechat/activity/myWay/card1.png") repeat bottom  ;
    background-size: rem(158px);
  }
  .a-second{
    width: rem(178px);
    left:50%;
    margin-left: rem(-89px);
    background: url("https://images.simpletour.com/wechat/activity/myWay/card2.png") repeat  bottom;
    background-size: rem(178px);
  }
  .a-third{
    width: rem(158px);
    right:rem(40px);
    background: url("https://images.simpletour.com/wechat/activity/myWay/card3.png") repeat  bottom ;
    background-size: rem(158px);
  }
  .animation1{
    -webkit-animation:down1 20s linear 0s normal none infinite ;
    animation:down1 20s linear 0s normal none infinite ;
  }
  .animation2{
    -webkit-animation:down1 25s linear 500ms  backwards infinite ;
    animation:down1 25s linear 500ms  backwards infinite ;
  }

  .fly_card {
    img.rotate1{
      width: 8rem;
      position: absolute;
      top: 12rem;
      left: 7rem;
      z-index: 10;
      -webkit-animation:rotate1 ease-in .7s forwards;
      animation:rotate1 ease-in .7s forwards;
    }

    img.rotate2 {
      width: 8rem;
      position: absolute;
      top: 6rem;
      left: 4rem;
      z-index: 10;
      -webkit-animation:rotate2 ease-in .7s forwards;
      animation:rotate2 ease-in .7s forwards;
    }
    img.rotate3 {
      width: 11rem;
      position: absolute;
      top: 8.5rem;
      left: 2rem;
      z-index: 10;
      -webkit-animation:rotate3 ease-in .7s forwards;
      animation:rotate3 ease-in .7s forwards;
    }
    img.rotate4 {
      width: 11rem;
      position: absolute;
      top: 16.5rem;
      left: 5rem;
      z-index: 10;
      -webkit-animation:rotate4 ease-in .7s forwards;
      animation:rotate4 ease-in .7s forwards;
    }
    .zhi5.rotate{
      width: 17rem;
      position: absolute;
      top: 21.5rem;
      left: 0;
      z-index: 10;
      -webkit-animation:rotateFly1 ease-in .7s forwards;
      animation:rotateFly1 ease-in .7s forwards;
    }

    .zhi6.rotate{
      width: 12rem;
      position: absolute;
      top: 10.5rem;
      left: -1rem;
      z-index: 10;
      -webkit-animation:rotateFly2 ease-in .6s forwards;
      animation:rotateFly2 ease-in .6s forwards;
    }

    .zhi7.rotate{
      width: 11rem;
      position: absolute;
      top: 3.5rem;
      left: 6.6rem;
      z-index: 10;
      -webkit-animation:rotateFly3 ease-in .7s forwards;
      animation:rotateFly3 ease-in .7s forwards;
    }

    .zhi8.rotate{
      width: 10rem;
      position: absolute;
      top: 2.5rem;
      left: 0;
      z-index: 10;
      -webkit-animation:rotateFly4 ease-in .7s forwards;
      animation:rotateFly4 ease-in .7s forwards;
    }

    .zhi9.rotate{
      width: 16rem;
      position: absolute;
      top: 17.5rem;
      left: 2.5rem;
      z-index: 10;
      -webkit-animation:rotateFly1 ease-in .7s forwards;
      animation:rotateFly1 ease-in .7s forwards;
    }

    .zhi10.rotate{
      width: 7rem;
      position: absolute;
      top: 10rem;
      left: 0;
      z-index: 10;
      -webkit-animation:rotateFly2 ease-in .7s forwards;
      animation:rotateFly2 ease-in .7s forwards;
    }

    .zhi11.rotate{
      width: 9rem;
      position: absolute;
      top: 13.5rem;
      left: 8.5rem;
      z-index: 10;
      -webkit-animation:rotateFly3 ease-in .7s forwards;
      animation:rotateFly3 ease-in .7s forwards;
    }

    .zhi12.rotate{
      width: 7rem;
      position: absolute;
      top: 8.5rem;
      left: 11rem;
      z-index: 10;
      -webkit-animation:rotateFly4 ease-in .7s forwards;
      animation:rotateFly4 ease-in .7s forwards;
    }

    .zhi13.rotate{
      width: 10rem;
      position: absolute;
      top: 0.5rem;
      left: 8rem;
      z-index: 10;
      -webkit-animation:rotateFly1 ease-in .7s forwards;
      animation:rotateFly1 ease-in .7s forwards;
    }

    .zhi14.rotate{
      width: 7rem;
      position: absolute;
      top: 8.5rem;
      left: 9rem;
      z-index: 10;
      -webkit-animation:rotateFly2 ease-in .7s forwards;
      animation:rotateFly2 ease-in .7s forwards;
    }
    .zhi15.rotate{
      width: 11rem;
      position: absolute;
      top: 0.5rem;
      left: 0;
      z-index: 10;
      -webkit-animation:rotateFly3 ease-in .7s forwards;
      animation:rotateFly3 ease-in .7s forwards;
    }
    .zhi16.rotate{
      width: 11rem;
      position: absolute;
      top: 14.5rem;
      left: 0;
      z-index: 10;
      -webkit-animation:rotateFly4 ease-in .7s forwards;
      animation:rotateFly4 ease-in .7s forwards;
    }
    .zhi17.rotate{
      width: 9rem;
      position: absolute;
      top: 10.5rem;
      left: 8.5rem;
      z-index: 10;
      -webkit-animation:rotateFly1 ease-in .7s forwards;
      animation:rotateFly1 ease-in .7s forwards;
    }
    .zhi18.rotate{
      width: 9rem;
      position: absolute;
      top: 18.5rem;
      left: 8rem;
      z-index: 10;
      -webkit-animation:rotateFly2 ease-in .7s forwards;
      animation:rotateFly2 ease-in .7s forwards;
    }
    .zhi19.rotate{
      width: 14rem;
      position: absolute;
      top: 6.5rem;
      left: 0;
      z-index: 10;
      -webkit-animation:rotateFly3 ease-in .7s forwards;
      animation:rotateFly3 ease-in .7s forwards;
    }
    .zhi20.rotate{
      width: 9rem;
      position: absolute;
      top: 13.5rem;
      left: 0;
      z-index: 10;
      -webkit-animation:rotateFly4 ease-in .7s forwards;
      animation:rotateFly4 ease-in .7s forwards;
    }
    .zhi21.rotate{
      width: 9rem;
      position: absolute;
      top: 21.5rem;
      left: 0;
      z-index: 10;
      -webkit-animation:rotateFly1 ease-in .7s forwards;
      animation:rotateFly1 ease-in .7s forwards;
    }
    .zhi22.rotate{
      width: 9rem;
      position: absolute;
      top: 7.5rem;
      left: 0;
      z-index: 10;
      -webkit-animation:rotateFly2 ease-in .7s forwards;
      animation:rotateFly2 ease-in .7s forwards;
    }
  }
}
.page2{
  background-color: #f7f3e7;
  font-size: 0;
  .page-content{
    position: absolute;
    overflow: hidden;
    left:8px;
    top:8px;
    .cover {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height:100%;
      background: url(https://images.simpletour.com/wechat/activity/myWay/cover.png) no-repeat center;
      z-index: 11;
      &.hide {
        display: none;
      }
    }
    .cover-content {
      position: absolute;
      display: none;
      top: 30%;
      left: 0;
      width: 100%;
      z-index: 12;
      text-align: center;
      opacity: 0;
      .later{
        position: absolute;
        width: 36%;
        height: 38%;
        bottom: 8%;
        left: 15%;
      }
      .now{
        position: absolute;
        width: 34%;
        height: 38%;
        bottom: 7%;
        right: 16%;
      }
      img {
        width: 80%;
      }
      &.in{
        opacity: 1;
        -webkit-transition-duration:1000ms;
        transition-duration: 1000ms;
        -webkit-transform:translate3d(0,0,0) scale(1);
        transform: translate3d(0,0,0) scale(1);
      }
      &.out{
        opacity: 0;
        z-index: 10999;
        -webkit-transition-duration: 500ms;
        transition-duration: 500ms;
        -webkit-transform: translate3d(0, 0, 0) scale(0.815);
        transform: translate3d(0, 0, 0) scale(0.815);
      }
    }
  }
  .bg{
    position: absolute;
    width: 100%;
    z-index:1;
  }
  .black_people{
    position: absolute;
    width: 100%;
    bottom: 0;
    z-index: 5;
    -webkit-transform: translate3d(0,200%,0);
    transform: translate3d(0,200%,0);
    &.riseUp{
      z-index: 5;
      -webkit-animation:riseUp ease-out 1s ;
      animation:riseUp ease-out 1s ;
    }
    &.animationEnd {
      -webkit-transform: translate3d(0,0,0);
      transform: translate3d(0,0,0);
    }
  }
  .border{
    position: absolute;
    width: 100%;
    z-index:11;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
  .bottom {
    position: absolute;
    width: 60%;
    height: 4rem;
    left:50%;
    margin-left: -30%;
    bottom: -.5rem;
    z-index: 11;
    background: url(https://images.simpletour.com/wechat/activity/myWay/preVideo/skipVideoBg.png) no-repeat center;
    background-size: contain;
    text-align: center;
    padding-top: 1rem;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    .bottom_font {
      width: 80%;
      -webkit-transform: translate3d(0,0,0);
      transform: translate3d(0,0,0);
      img {
        width:100%;
      }
    }
  }
  .video_font{
    position: absolute;
    width: 80%;
    bottom: 4rem;
    z-index: 10;
    left: 50%;
    margin-left: -40%;
    &.in{
      opacity: 1;
      -webkit-transition-duration:1500ms;
      transition-duration: 1500ms;
      -webkit-transform:translate3d(0,0,0) scale(1);
      transform: translate3d(0,0,0) scale(1);
    }
    &.out{
      opacity: 0;
      z-index: 10999;
      -webkit-transition-duration: 1500ms;
      transition-duration: 1500ms;
      -webkit-transform: translate3d(0, 0, 0) scale(0.815);
      transform: translate3d(0, 0, 0) scale(0.815);
    }
  }
  .play_btn {
    position: absolute;
    width: 22%;
    bottom: 14.5rem;
    z-index: 12;
    left: 50%;
    margin-left: -11%;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  .people_card1 {
    position: absolute;
    width: 10%;
    top: 27%;
    right: 7%;
    z-index: 4;
    opacity: 0;
    &.gradual {
      -webkit-animation:gradual ease-in 2s forwards;
      animation:gradual ease-out 2s forwards;
    }
  }
  .people_card2 {
    position: absolute;
    width: 9%;
    top: 3%;
    right: 7%;
    z-index: 4;
    opacity: 0;
    &.gradual {
      -webkit-animation:gradual ease-out .7s forwards;
      animation:gradual ease-out .7s forwards;
    }
  }
  .people_card3 {
    position: absolute;
    width: 10%;
    top: 3%;
    left: 7%;
    z-index: 4;
    opacity: 0;
    &.gradual {
      -webkit-animation:gradual ease-in 1.5s forwards;
      animation:gradual ease-in 1.5s forwards;
    }
  }
  .people_card4 {
    position: absolute;
    width: 11%;
    top: 3%;
    left: 66%;
    z-index: 4;
    opacity: 0;
    &.gradual {
      -webkit-animation:gradual ease-in 1s forwards;
      animation:gradual ease-in 1s forwards;
    }
  }
  .people_card5 {
    position: absolute;
    width: 10%;
    top: 27%;
    left: 7%;
    z-index: 4;
    opacity: 0;
    &.gradual {
      -webkit-animation:gradual ease-in 1s forwards;
      animation:gradual ease-in 1s forwards;
    }
  }
  .people_card6 {
    position: absolute;
    width: 10%;
    top: 3%;
    left: 46%;
    z-index: 4;
    opacity: 0;
    &.gradual {
      -webkit-animation:gradual ease-in 1s forwards;
      animation:gradual ease-in 1s forwards;
    }
  }
  .people_card7 {
    position: absolute;
    width: 9%;
    top: 3%;
    left: 26%;
    z-index: 4;
    opacity: 0;
    &.gradual {
      -webkit-animation:gradual ease .5s forwards;
      animation:gradual ease .5s forwards;
    }
  }
}
.page3 {
  background-color: #f7f3e7;
  font-size: 0;
  .page-content{
    position: absolute;
    overflow: hidden;
    left:8px;
    top:8px;
  }
  .bg{
    position: absolute;
    width: 100%;
    z-index:1;
  }
  .border{
    position: absolute;
    width: 100%;
    z-index:11;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
  .dui_icon {
    position: absolute;
    width: 16%;
    bottom: 10rem;
    z-index: 11;
    left: 50%;
    margin-left: -8%;
  }
  .font_dui{
    position: absolute;
    width: 60%;
    bottom: 4rem;
    z-index: 11;
    left: 50%;
    margin-left: -30%;
    opacity: 0;
    &.in{
      opacity: 1;
      -webkit-transition-duration:1500ms;
      transition-duration: 1500ms;
      -webkit-transform:translate3d(0,0,0) scale(1);
      transform: translate3d(0,0,0) scale(1);
    }
  }
  .bottom {
    position: absolute;
    width: 100%;
    bottom: 0;
    z-index: 11;
    padding: 0 .3rem;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    img {
      width:100%;
    }
  }

}
.page4{
  background-color: #f7f3e7;
  .page-content{
    position: absolute;
    overflow: hidden;
    left:8px;
    top:8px;
  }
  .bg{
    position: absolute;
    width: 100%;
    z-index:1;
  }
  .head{
    width: 100%;
    position: absolute;
    z-index:3;
    bottom:0;
  }
  .light{
    width: 100%;
    position: absolute;
    z-index:4;
    top:.6rem;
    &.breath{
      animation: breath 3s linear infinite;
    }
  }
  .cloud1,.cloud2,.cloud3{
    position: absolute;
    animation: cloud 5s linear infinite;
  }
  .cloud1{
    width: 5rem;
    right:-1rem;
    top:13rem;
    z-index:3;
  }
  .cloud2{
    width: 5rem;
    left:3rem;
    top:2rem;
    z-index:2;
  }
  .cloud3{
    width: 9rem;
    left:-1rem;
    top:11rem;
    z-index:4;
  }
  .border{
    position: absolute;
    width: 100%;
    z-index:7;
  }
  .typewriter{
    position: absolute;
    width: 18.75rem;
    z-index:11;
    bottom:0;
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
    &.up{
      -webkit-animation:typewriter-up 500ms ease-out forwards;
      animation:typewriter-up 500ms ease-out forwards;
    }
  }
  .question{
    font-size: 0;
    width: 16.875rem;
    position: absolute;
    z-index:8;
    left:0.9375rem;
    top:-15.5rem;
    -webkit-transform: translate3d(0,200%,0);
    transform: translate3d(0,200%,0);
    &.up{
      -webkit-animation:question-up 500ms ease-out forwards;
      animation:question-up 500ms ease-out forwards;
    }
    &.down{
      -webkit-animation:question-down 500ms ease-out forwards;
      animation:question-down 500ms ease-out forwards;
    }
    img{
      width: 100%;
    }
    .color1,.color2{
      width: .7rem;
      height: .7rem;
      background-color: #c32540;
      position: absolute;
      z-index:9;
      top:7.7rem;
      left:1.94rem;
      &.hide {
        display: none;
      }
    }
    .color2{
      left:11.15rem;
    }
    .first,.second{
      width: 5rem;
      height: 2rem;
      position: absolute;
      z-index:10;
      top:7rem;
      left:1.4rem;
    }
    .second{
      left: 10.5rem;
    }
  }
  .left,.right{
    position: absolute;
    width: 1rem;
    z-index:10;
    top:-5.5rem;
    left:2.7rem;
    opacity: 0;
    &.up{
      -webkit-animation:typewriter-icon-up 500ms ease-out forwards;
      animation:typewriter-icon-up 500ms ease-out forwards;
    }
  }
  .left.exchange{
    -webkit-animation:question-exchange 1s ease-out forwards;
    animation:question-exchange 1s ease-out forwards;
  }
  .right{
    left:15rem;
    &.exchange{
      -webkit-animation:question-exchange1 1s ease-out forwards;
      animation:question-exchange1 1s ease-out forwards;
    }
  }
}